<template>
<div class="form-list">
    <section class="form-content">
        <div class="form-head form-head-one">
            <h1>撤回变更商标代理人/文件接收人申请书</h1>
        </div>
        <el-form ref="organization" :model="organization" class="model-form newStyle-fzk" label-width="280px" size="small">

            <el-form-item label="申请人名义(中文)：">
                <span>{{organization.appName}}</span>
            </el-form-item>

            <el-form-item label="(英文)：">
                <span>{{organization.appNameEn}}</span>
            </el-form-item>

            <el-form-item label="申请人地址(中文)：">
                <span>{{organization.appAddCn}}</span>
            </el-form-item>

            <el-form-item label="(英文)：">
                <span>{{organization.appAddEn}}</span>
            </el-form-item>

            <el-form-item label="邮政编码：">
                <span>{{organization.postCode}}</span>
            </el-form-item>

            <el-form-item label="联系人：">
                <span>{{organization.contact}}</span>
            </el-form-item>

             <el-form-item label="邮箱：">
                <span>{{organization.email}}</span>
            </el-form-item>

            <el-form-item label="电话：">
                <span>{{organization.phone}}</span>
            </el-form-item>

            <el-form-item label="代理机构名称：">
                <span>{{organization.deptName}}</span>
            </el-form-item>

            <el-form-item label="商标申请号/注册号：">
                <span>{{organization.appNum}}</span>
            </el-form-item>

            <el-form-item label="原变更申请号：">
                <span>{{organization.registNumOri}}</span>
            </el-form-item>

            <el-form-item label="是否共有商标：">
                <span v-if="organization.share==1">是</span>
                <span v-if="organization.share==0">否</span>
            </el-form-item>

            <el-form-item label="撤回理由：">
                <span>{{organization.withdrawReason}}</span>
            </el-form-item>

            <el-form-item label="营业执照：">
                <imgshow>
                    <img :src='mconfig.host+organization.busimg' alt="">
                </imgshow>
            </el-form-item>
            <el-form-item v-if="organization.appliType" label="身份证（正反面）：">
                <imgshow>
                    <img :src='mconfig.host+organization.idcardface' alt="">
                </imgshow>
            </el-form-item>
            <el-form-item label="网上确认书：">
                <imgshow>
                    <img :src='mconfig.host+organization.qrfile' alt="">
                </imgshow>
            </el-form-item>
            <!--<el-form-item class="mar" label="其他附件 :" v-if="organization.otherfile != []">-->
            <el-form-item class="mar" label="其他附件 :" v-if="organization.otherfile.length>0">
                <imgshow v-for="(item,index) in organization.otherfile" :key="index">
                <span class=""><img :src="mconfig.host+item" ></span>
                </imgshow>
            </el-form-item>
        </el-form>
    </section>

    <!-- 第二部分 -->
    <section class="form-content" v-if="organization.share==1?true:false">
        <div class="form-head">
            <h1>商标注销申请书<br>（附页）</h1>
            <p>其他共有人</p>
        </div>
        <proAppend :callback="append"></proAppend>
        <!-- <el-form ref="otherPublic" v-model="append" class="model-form model-form-fzk" label-width="280px" size="small">
            <div v-for="(e,i) in append" :key="i">

                <el-form-item :label="(i+1)+'.名义(中文)：'">
                    <span>{{e.partNameCh}}</span>
                </el-form-item>

                <el-form-item label="(英文)：">
                    <span>{{e.partNameEn}}</span>
                </el-form-item>

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="地址(中文)：">
                            <span>{{e.partAddrCh}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <span class="signature" v-if="showSignature">（章戳/签字）</span>
                    </el-col>
                </el-row>

                <el-form-item label="(英文)：">
                    <span>{{e.partAddrEn}}</span>
                </el-form-item>
            </div>
        </el-form> -->
    </section>
</div>
</template>

<script>
import imgshow from "../common/imgshow"
import proAppend from "../common/proAppend"
export default {
    components:{
        imgshow,
        proAppend
    },
    name: 'Form',
    data() {
        return {
            imgShow: true,
            organization: {
                appName: '', // 申请人名义(中文)
                appNameEn: '', // 申请人名义(英文)
                appAddCn: '', // 申请人地址(中文)
                appAddEn: '', // 申请人地址(英文)
                idcardface: '', //身份证正反
                idcardimg: '', //身份证正反
                postCode: '', // 邮政编码
                contact: '', // 联系人
                phone: '', // 电话
                appNum: '', // 商标申请号/注册号
                registNumOri: '', // 原变更申请号
                share: '', // 是否共有商标: 1:是0:否
                withdrawReason: '', // 撤回理由
                idcardimg: '', //身份证地址
                busimg: "", //营业执照
                qrfile:"",//网上确认书
                deptName: "",
                otherfile:[]
            },
            // 其他共有人
            append: [{
                attr: "",
                changeAfterAddr: "",
                changeAfterAddrEn: "",
                changeAfterName: "",
                changeAfterNameEn: "",
                classId: "",
                id: "",
                modelId: "",
                partAddrCh: "",
                partAddrEn: "",
                partNameCh: "",
                partNameEn: "",
                type: ""
            }],
            showSignature: false,
        }
    },
    methods: {
        getDept() { //获取代理网点
            return this.$http.get("/trademark/system/dept/findDept");
        },
        //接口获取到数据
        interface(e) {
            var _this = this;
            this.$http
                .get("/trademark/proWocotadra/findByIdDetl", {
                    params: {
                        id: e
                    },
                })
                .then((res) => {
                    this.organization = res.data.data.data
                    this.organization.otherfile = JSON.parse(this.organization.otherfile);
                    this.append = Object.assign(_this.append, res.data.data.append);
                    this.getDept().then(Dept => {//获取代理网点
                        var DeptData = Dept.data.data;
                        for (const k in DeptData) {
                            if (DeptData.hasOwnProperty(k)) {
                                const element = DeptData[k];
                                if (_this.organization.branchNetworkId == element.deptId) {
                                    _this.organization.branchNetworkId = element.deptName;
                                    // useless
                                    break;
                                }
                            }
                        };
                    })
                });
        },
    },
    mounted() {
        this.id = this.$route.query.id;
        this.interface(this.id);
    },
    computed:{
      
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.form-list {
    display: inline-block;
    margin-left: 200px;
}

.form-list /deep/ .el-form-item__label {
    font-size: 18px;
    border-bottom: none;
    height: 30px;
    padding-right: 0;
}

.form-list /deep/ .el-form-item__content {
    font-size: 18px;
    border-left: none;
    border-bottom: none;
    /* padding-left: 10px; */
    height: auto;
    box-sizing: border-box;
    word-break: break-word;
}

.form-list：:v-deep .el-form-item {
    margin: 0;
}

.form-list .el-input.el-input--mini {
    font-size: 14px;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
    font-size: 18px;
}

.form-list .signs .el-row {
    margin: 150px 0;
}

.form-list .el-row .el-col {
    text-align: left;
}

.form-list .el-row .el-col span {
    font-size: 19px;
    color: #000;
}

.form-content {
    width: 768px;
    margin: 0 auto;
}

.form-head h1,
.form-head p {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
        margin: 120px auto 20px auto;
    max-width: 537px;
    line-height: 45px;
}

.form-head-one h1 {
    font-size: 30px;
    margin: 50px auto 40px auto;
    font-weight: 600;
}

.form-head p {
    font-size: 18px;
    margin: 20px 0;
    font-weight: normal;
}


/* 改 */




.el-form-item--small.el-form-item {
    margin-bottom: 5px;
}

/* 模块标题 */
.idCardImg img {
    margin-right: 15px;
    display: inline;
}

.modelTittwo {
    padding-top: 30px;
}

.el-form-item {
    margin-bottom: 0;
}

.form .model-form {
    padding-left: 224px;
}

.model-form-fzk {

    margin-left: 129px;
}

.seal {
    padding: 0 20px;
}

.seal-container {
    min-height: 36px;
}

/* 签字 */
.signature {
    color: #ccc;
}
</style><style lang="css">
.el-radio__input .el-radio__inner {
    border-color: #000;
    background: #fff;
}

/* 选中 */
.el-radio__input.is-checked .el-radio__inner {
    border-color: #666;
    background: #666;
}

.el-radio__inner {
    border-radius: 0;
    color: #000;
}

/* 选中 */
.el-radio__input.is-checked+.el-radio__label {
    color: #000;
}
.el-form-item{
    margin-bottom: 7px;
}
</style>
